<template>
	<view>
		<view class="load" v-if="!loading">
			<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
		</view>
		<view class="wrap" v-else>
			<view class="navBox" id="navBox" :style="isNav ? 'background: #FFFFFF;' : ''">
				<topStatus></topStatus>
				<view class="nav_main">
						<uni-icons type="left" color="#343434" size="30" @click="goBack()"></uni-icons>
						<view class="nav_tit">
							测一测你的吃货等级
						</view>
						<uni-icons type="left" color="#333" size="30" style="opacity: 0;"></uni-icons>
				</view>
			</view>
			<view :style="{height:navHeight+'px'}"></view>
			
			<view  v-show="isSuccess==0">
				<view class="main">
					<view class="exam_body">
						<view class="exam_count">
							<text>{{examIndex+1}}</text>/ {{examList.length}}
						</view>
						<view class="exam_tit">
							{{topic.FoodName}}
						</view>
						<view class="exam_img">
							<image :src="topic.Img" mode="aspectFill"></image>
						</view>
						<view class="exam_lit">
							产地：{{topic.Province+topic.City}}{{topic.Area?topice.Area:''}}
						</view>
						<view class="exam_btn">
							<view class="btn_cell" @click="SaveLikeFood(topic.ID,0)">
								没吃过
							</view>
							<view class="btn_cell" style="background-color: #ffa91c;" @click="SaveLikeFood(topic.ID,2)">
								想吃
							</view>
							<view class="btn_cell" style="background-color: #ff1712;" @click="SaveLikeFood(topic.ID,1)">
								吃过
							</view>
						</view>
					</view>
				</view>
				
				<!-- <view class="main" style="margin-top: 24rpx;">
					<view class="exam_body">
						<view class="shop_title">
							关联美食
						</view>
						<view class="shop_cell">
							<view class="shop_box" v-for="(item,index) in 10" :key="index" @click="nav_to(`/pages/shop/detail?id=${item.ID}`)">
								<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/foods/%E9%93%9C%E5%B7%9D%E8%8B%B9%E6%9E%9C.jpg" mode="aspectFill"></image>
								<view class="shop_content">
									<view class="shop_name">
										正宗江西赣南脐橙 原产地发货正宗江西赣南脐橙 原产地发货
									</view>
									<view class="shop_foot">
										<view class="price">
											<text>￥</text>
											39.9
										</view>
										<view class="icon">
											<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1734936250649175.png" mode="aspectFill"></image>
										</view>
									</view>
								</view>
								
								
							</view>
						</view>
						
					</view>
				</view> -->
				
			</view>
			
			
			<view class="score_body" v-show="isSuccess==1">
				<view class="score_tit">
					您已成功解锁了 <text>{{Count.EatNum}}</text> 种美食
				</view>
				<view class="score_lit">
					再解锁 <text>1</text> 种美食，即可获得“资深吃货”称号
				</view>
				<view class="btn_cell" @click="Again()">
					再来一次
				</view>
				<view class="btn_cell btn_goback" @click="goBack()">
					返回
				</view>
				
				<button class="btn_cell btn_wx" open-type="share">
					<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17346877839101223.png" mode="aspectFill"></image>
					转发给好友一起测
				</button>
			</view>
			
			
			<view class="eat_body" v-show="isSuccess==2">
				<view class="eat_head">
					<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1734166728444775.png" mode="aspectFill"></image>
					<view class="head_name">
						恭喜您获得吃货称号
					</view>
					<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17341667398211408.png" mode="aspectFill"></image>
				</view>
				<view class="eat_icon">
					<image :src="FoodTest.FoodMedal.Food_Medal_ICON" mode="aspectFill"></image>
				</view>
				<!-- <view class="eat_title">
					当前成功解锁了
					<text>5</text>
					种美食
				</view>
				<view class="eat_lit">
					已解锁80种美食，获得“高级吃货”称号
				</view> -->
				<view class="btn_body">
					
					<view class="btn_cell" @click="Again()">
						继续测评
					</view>
					<view class="btn_cell btn_goback" @click="goBack()">
						返回
					</view>
					
					<button class="btn_cell btn_wx" open-type="share">
						<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17346877839101223.png" mode="aspectFill"></image>
						转发给好友一起测
					</button>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
const { safeArea, windowHeight } = uni.getSystemInfoSync()
	export default {
		data() {
			return {
				loading:false,
				isNav: false,
				navHeight:90,
				examList:[],
				examIndex:0,
				topic:{},
				Count:{
					EatNum:0,
					WantNum:0,
					NoEatNum:0
				},
				isSuccess:0,
				FoodTest:{}
			};
		},
		onPageScroll(e) {
			// console.log(e.scrollTop);
			this.isNav = e.scrollTop > 20 ? true : false
		},
		onLoad() {
			this.init()
		},
		async onShareAppMessage(res) {
			if(res.from=='button'){
				let shareTitle = `${uni.getStorageSync('user').Name}邀请您参与测一测您的吃货等级`;
				let sharePath = `pages/foodieChina/eatExam`;
				let imageUrl = 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/173224170382880.png';
				return {
					title: shareTitle,
					path: sharePath,
					imageUrl: imageUrl
				}
			}
			
		},
		methods:{
			Height(){
				this.$nextTick( () => {
					setTimeout(async()=>{
						const height = await this.getHeight('#navBox') //计算的元素高度
						console.log('=》》》》》》》》》》》》》》》》》》》》》》height',height);
						this.navHeight = height 
					},300)
				})
			},
			getHeight(id) {
				return new Promise(resolve => {
					let query = uni.createSelectorQuery().in(this);
					query.select(id).boundingClientRect();
					query.exec((res) => {
							resolve(res[0].height)
					})
				})
			},
			goBack() {
				const pages = getCurrentPages();
				if (pages.length > 1) {
					// 如果页面栈长度大于1，则说明有上一页，可以返回
					uni.navigateBack();
				} else {
					// 如果没有上一页，则导航到首页
					uni.reLaunch({
							url: '/pages/tab/home'
					});
				}
			},
			async init(){
				await this.GetRandomFoodList()
				this.loading = true
				this.Height()
			},
			async GetRandomFoodList(){
				let res = await this.$api.post('/Food/GetRandomFoodList',{
					Level:1
				})
				this.examList = res.data
				this.topic = this.examList[0]
			},
			async SaveLikeFood(FoodID,EatStatus){
				let params = {
					FoodID,
					EatStatus
				}
				let res = await this.$api.post('/Food/SaveLikeFood',params)
				this.examIndex+=1
				
				if(EatStatus==1){
					this.Count.EatNum+=1
				}else if(EatStatus==2){
					this.Count.WantNum+=1
				}else if(EatStatus==0){
					this.Count.NoEatNum+=1
				}
				console.log(this.examIndex,this.examList.length);
				if(this.examIndex <= this.examList.length-1){
					this.topic = this.examList[this.examIndex]
				}else{
					this.SaveUserTest()
					console.log('答完了》》》');
				}
			},
			async SaveUserTest(){
				let res = await this.$api.post('/Food/SaveUserTest',this.Count)
				this.FoodTest = res.data
				if(this.FoodTest.IsGet==1){
					this.isSuccess = 2
				}else{
					this.isSuccess = 1
				}
			},
			Again(){
				this.examIndex = 0
				this.Count.EatNum = 0
				this.Count.WantNum = 0
				this.Count.NoEatNum = 0
				this.isSuccess = 0
				this.init()
			}
		}
	}
</script>

<style lang="scss">
button{padding: 0;margin: 0; border: 1px solid transparent;}
button::after{ border: none; }
.button-hover {
    color:transparent;
    background-color:transparent;
}
page {
    background-color: #FFF5E9;
}
.navBox {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;

	.nav_main {
			padding: 0 14rpx;
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 36rpx;
			color: #fff;

			.nav_tit {
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
			}
	}
}

.wrap{
	padding: 24rpx;
	.main{
		.exam_body{
			padding: 24rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			.exam_count{
				font-size: 28rpx;
				color: #666666;
				text{
					font-weight: bold;
					font-size: 40rpx;
					color: #FF6030;
					margin-right: 8rpx;
				}
			}
			.exam_tit{
				margin: 14rpx auto 40rpx;
				width: fit-content;
				text-align: center;
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
				position: relative;
				z-index: 1;
				&::after{
					position: absolute;
					bottom: 2rpx;
					left: 50%;
					transform: translate(-50%,0);
					content: '';
					width: 100%;
					height: 12rpx;
					background: linear-gradient( 90deg, rgba(255,79,9,0) 0%, rgba(255,79,9,0.9) 50%, rgba(255,64,3,0) 100%);
					z-index: -1;
				}
			}
			.exam_img{
				width: 536rpx;
				height: 536rpx;
				border-radius: 16rpx;
				margin: 0 auto;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.exam_lit{
				font-size: 28rpx;
				color: #333333;
				margin: 40rpx auto;
				text-align: center;
			}
			.exam_btn{
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				.btn_cell{
					width: fit-content;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
					padding: 16rpx 46rpx;
					background: #FF6C13;
					border-radius: 44rpx;
				}
			}
			
			.shop_title{
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				margin-bottom: 24rpx;
			}
		
			.shop_cell{
				display: flex;
				overflow-x: scroll;
				.shop_box{
					border-radius: 16rpx;
					box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(255,96,48,0.12);
					// overflow: hidden;
					margin-right: 16rpx;
					margin-bottom: 2rpx;
					&:last-child{
						margin-right: 0;
					}
					image{
						width: 224rpx;
						height: 224rpx;
						border-radius: 16rpx 16rpx 0 0;
					}
					.shop_content{
						padding: 8rpx;
					}
					.shop_name{
						width: 100%;
						font-weight: bold;
						font-size: 24rpx;
						color: #333333;
						-webkit-line-clamp: 2;
						/* 显示几行 */;
						display: -webkit-box;
						/* 弹性伸缩盒子 */
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.shop_foot{
						margin-top: 8rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.price{
							font-weight: bold;
							font-size: 36rpx;
							color: #FF6030;
							text{
								color: #FF6030;
								font-size: 24rpx;
							}
						}
						.icon{
							width: 40rpx;
							height: 36rpx;
							image{
								width: 100%;
								height: 100%;	
							}
						}
					}
				}
			}
		}
	}
	
	.score_body{
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 24rpx;
		margin-top: 60rpx;
		.score_tit{
			text-align: center;
			font-size: 32rpx;
			color: #641E0C;
			text{
				font-weight: bold;
				font-size: 48rpx;
				color: #FF6030;
				margin: 0 8rpx;
			}
		}
		.score_lit{
			margin: 40rpx auto;
			margin-bottom: 102rpx;
			text-align: center;
			font-size: 28rpx;
			color: #844C3E;
			text{
				font-size: 28rpx;
				color: #FF6030;
			}
		}
		.btn_cell{
			width: 408rpx;
			height: 88rpx;
			font-size: 32rpx;
			border: 2rpx solid #FF4912;
			margin: 32rpx auto;
			background: #FF4912;
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			image{
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}
		}
		.btn_goback{
			background-color: #fff;
			color: #FF4912;
		}
		.btn_wx{
			background-color: #fff;
			border-color: #20B11D;
			color: #20B11D;
		}
	}
	
	.eat_body{
		padding: 72rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		.eat_head{
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 48rpx;
				height: 32rpx;
			}
			.head_name{
				margin: 0 8rpx;
				font-weight: bold;
				font-size: 36rpx;
				color: #641E0C;
			}
		}
		.eat_icon{
			width: 100%;
			height: 702rpx;
			margin: 0 auto;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.eat_title{
			font-size: 32rpx;
			color: #641E0C;
			text-align: center;
			position: relative;
			z-index: 9;
			&::after{
				content: '';
				position: absolute;
				bottom: -2rpx;
				left: 50%;
				transform: translate(-50%,0);
				width: 65%;
				height: 12rpx;
				background: #FFC9B8;	
				border-radius: 8rpx;
				z-index: -1;
			}
			text{
				font-weight: bold;
				font-size: 48rpx;
				color: #FF6030;
				padding: 0 6rpx;
			}
		}
		.eat_lit{
			margin-top: 24rpx;
			font-size: 28rpx;
			color: #641E0C;
		}
		.btn_body{
			// margin-top: 118rpx;
			// display: flex;
			// align-items: center;
			// justify-content: space-between;
		
			.btn_cell{
				flex: 1;
				height: 88rpx;
				font-size: 32rpx;
				text-align: center;
				border: 2rpx solid #FF4912;
				margin: 32rpx auto;
				background: #FF4912;
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 8rpx;
				}
			}
			.btn_goback{
				background-color: #fff;
				color: #FF4912;
			}
			.btn_wx{
				background-color: #fff;
				border-color: #20B11D;
				color: #20B11D;
			}
			.btn_next{
				background-color: #FF6030;
				color: #FFFFFF;
			}
		}
	}
}
</style>
